<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
          删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch="false" :searchVisible="false" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="图片" align="center" prop="url">
        <template slot-scope="scope">
          <el-image
            style="width: 80px; height: 50px"
            :src="scope.row.url"
            :preview-src-list="images">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="显示顺序" align="center" prop="sort"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">
            修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <upload-oss v-show="openupload" @on-close="openupload=false" ref="uploadOss"></upload-oss>

  </div>

</template>

<script>
  import {
    listOss,
    getOss,
    delOss
  } from "@/api/system/oss";
  import UploadOss from './upload-oss'

  export default {
    name: "oss",
    components: {UploadOss},
    data() {
      return {
        tableName: null,
        tableId: null,
        list: [],
        images: [],
        openupload: false,
        openupdate: false,
        // 非多个禁用
        multiple: true,
      }
    },
    created() {
      this.tableName = this.$route.params && this.$route.params.tableName;
      this.tableId = this.$route.params && this.$route.params.tableId;
      this.getList();
    },
    methods: {
      getList() {
        const _this = this
        this.loading = true
        listOss(this.tableName, this.tableId).then(response => {
            _this.list = response.data
            _this.loading = false
            _this.onLoadingListEnd()
          }
        )
      },
      onLoadingListEnd() {
        let images = [];
        for (let i = 0; i < this.list.length; i++) {
          let item = this.list[i];
          images.push(item.url);
        }
        this.images = images;
      },
      handleAdd() {
        this.$refs.uploadOss.init()
        this.openupload = true
      },
      handleUpdate(row) {
        const _this = this
        const queryId = row.id || this.ids
        getOss(_this.tableName, queryId).then(response => {
          _this.$refs.uploadOss.init()
          _this.openupdate = true
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const _this = this
        const ids = row.id || this.ids
        this.$confirm('是否确认删除数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delOss(_this.tableName, _this.tableId, ids)
        }).then(() => {
          _this.getList()
          _this.msgSuccess('删除成功')
        }).catch(function () {
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item =>
          item.id
        )
        this.single = selection.length != 1
        this.multiple = !selection.length
      }
    }
  }
</script>
